<template>
  <div class="page">
    <div class="slicer_warpper">
      <DesignSider
        :examList="questList"
        :contentList="contentList"
        :type="type"
        @handleExam="handleExam"
      />
    </div>

    <!-- 锚点容器 -->
    <div id="quest_content" class="content_warpper">
      <DesignContent
        :style="{
          width: '883px',
          overflow: 'hidden',
          padding: '24px',
          boxShadow: '0px 0px 4px 0px @shadow-color',
          backgroundColor: 'white',
          minHeight: 'calc(100vh - 64px)',
        }"
        :questionaire="questionaire"
        :contentList="contentList"
        :examList="questList"
        :type="type"
        @handleExam="handleExamEdit"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  useQuestChoseModelStore,
  useQuestTypeChoseStore,
} from '@/store/create';
import { useDesignContentStore, useDesignSliderStore } from '@/store/design';
import { ExamItem, Questionaire, QuestsType } from '@/store/design/types';
import { computed, defineComponent } from 'vue';
import DesignContent from './DesignContent.vue';
import DesignSider from './DesignSider.vue';

export default defineComponent({
  components: { DesignContent, DesignSider },
  props: {},
  emits: [],
  setup() {
    const sliderStore = useDesignSliderStore();
    const contentStore = useDesignContentStore();
    const useTypeStore = useQuestTypeChoseStore();
    const modelStore = useQuestChoseModelStore();

    // sliderStore.getExamType((useTypeStore.selectType.id + 1).toString());

    const questList = computed<QuestsType[]>(() => sliderStore.getQueryList);
    const contentList = computed<ExamItem[]>(() => contentStore.getContentList);
    const questionaire = computed<Questionaire>(
      () => contentStore.getQuestionaire,
    );
    const type = computed<number>(() => useTypeStore.selectType.id);

    const handleExam = (value: QuestsType) => {
      contentStore.addExam(value);
    };

    const handleExamEdit = (value: ExamItem) => {
      contentStore.changeStatus(value);
    };

    contentStore.setTitle(modelStore.title);

    return {
      questList,
      type,
      handleExam,
      contentList,
      handleExamEdit,
      questionaire,
    };
  },
});
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: space-between;
  .content_warpper {
    box-shadow: 0px 2px 5px 0px @shadow-color;
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100vh - 64px);
  }
}
</style>
